<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1200px">
    <div>
      <el-card shadow="never">
        <el-descriptions :column="infoOptions.column">
          <div v-for="(item, index) in infoOptions.columns" :key="index">
            <el-descriptions-item :label="item.label">
              <span> {{ infoOptions.data[item.key] || '--' }}</span>
            </el-descriptions-item>
          </div>
        </el-descriptions>
      </el-card>
      <el-card shadow="never" class="mt-16px">
        <template #header>
          <span>CPU运行状态</span>
        </template>
        <div class="flex">
          <div class="w-25%">
            <el-descriptions :column="1" direction="vertical">
              <el-descriptions-item label="CPU型号">
                <span> {{ infoOptions.data.cpu ? infoOptions.data.cpu.model : '--' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="利用率">
                <span>
                  {{ infoOptions.data.cpu ? infoOptions.data.cpu.utilizationRate : '--' }}%</span
                >
              </el-descriptions-item>
              <el-descriptions-item label="负载率">
                <span> {{ infoOptions.data.cpu ? infoOptions.data.cpu.loadFactor : '--' }}%</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <el-divider direction="vertical" style="height: 280px" />
          <div class="w-75%">
            <Echart :options="cpuLineOptionsData" v-if="chartsShow" :height="280" />
          </div>
        </div>
      </el-card>
      <el-card shadow="never" class="mt-16px">
        <template #header>
          <span>内存使用情况</span>
        </template>
        <div class="flex">
          <div class="w-25%">
            <el-descriptions :column="1" direction="vertical">
              <el-descriptions-item label="内存大小">
                <span> {{ infoOptions.data.mem ? infoOptions.data.mem.memMax : '--' }}G</span>
              </el-descriptions-item>
              <el-descriptions-item label="内存规格">
                <span> {{ infoOptions.data.mem ? infoOptions.data.mem.type : '--' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="使用量">
                <span> {{ infoOptions.data.mem ? infoOptions.data.mem.usage : '--' }}G</span>
              </el-descriptions-item>
              <el-descriptions-item label="可用量">
                <span> {{ infoOptions.data.mem ? infoOptions.data.mem.available : '--' }}G</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <el-divider direction="vertical" style="height: 280px" />
          <div class="w-75%">
            <Echart :options="memLineOptionsData" v-if="chartsShow" :height="280" />
          </div>
        </div>
      </el-card>
      <el-card shadow="never" class="mt-16px">
        <template #header>
          <span>磁盘使用情况</span>
        </template>
        <div class="flex">
          <div class="w-25%">
            <el-descriptions :column="1" direction="vertical">
              <el-descriptions-item label="磁盘容量">
                <span> {{ infoOptions.data.disk ? infoOptions.data.disk.diskMax : '--' }}G</span>
              </el-descriptions-item>
              <el-descriptions-item label="占用率">
                <span> {{ infoOptions.data.disk ? infoOptions.data.disk.usage : '--' }}G</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <el-divider direction="vertical" style="height: 280px" />
          <div class="w-75%">
            <Echart :options="diskLineOptionsData" v-if="chartsShow" :height="280" />
          </div>
        </div>
      </el-card>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
import * as DeviceApi from '@/api/device'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { cpuLineOptions, memLineOptions, diskLineOptions } from './echarts-data'

defineOptions({ name: 'SystemDeptForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const infoOptions = reactive({
  column: 3,
  columns: [
    { label: 'IP地址', key: 'ip' },
    { label: '端口', key: 'prot' },
    { label: '类型', key: 'type' },
    // { label: '厂商信息', key: 'source' },
    { label: '账号', key: 'account' },
    { label: '接入时间', key: 'createTime' }
  ],
  data: {}
})

const cpuData = ref([])
const diskData = ref([])
const memData = ref([])
const chartsShow = ref(false)
/** 打开弹窗 */
const open = async (id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = '引擎监测'

  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      infoOptions.data = await DeviceApi.deviceGet(id)
      const data = await DeviceApi.deviceTrendStatistics(id)
      // console.log('data', data)
      cpuData.value = data.cpu
      diskData.value = data.disk
      memData.value = data.mem
      getAllApi()
    } finally {
      formLoading.value = false
    }
  }
}

// echarts
const cpuLineOptionsData = reactive<EChartsOption>(cpuLineOptions)
const memLineOptionsData = reactive<EChartsOption>(memLineOptions)
const diskLineOptionsData = reactive<EChartsOption>(diskLineOptions)

const getCpuLine = async () => {
  set(
    cpuLineOptionsData,
    'xAxis.data',
    cpuData.value.map((v) => v.time)
  )
  set(cpuLineOptionsData, 'series', [
    {
      name: '利用率',
      smooth: true,
      type: 'line',
      data: cpuData.value.map((v) => v.utilizationRate),
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    },
    {
      name: '负载率',
      smooth: true,
      type: 'line',
      itemStyle: {},
      data: cpuData.value.map((v) => v.loadFactor),
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }
  ])
}
const getMemLine = async () => {
  set(
    memLineOptionsData,
    'xAxis.data',
    memData.value.map((v) => v.time)
  )
  set(memLineOptionsData, 'series', [
    {
      name: '可用量',
      smooth: true,
      type: 'line',
      data: memData.value.map((v) => v.available),
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    },
    {
      name: '使用量',
      smooth: true,
      type: 'line',
      itemStyle: {},
      data: memData.value.map((v) => v.usage),
      animationDuration: 2800,
      animationEasing: 'quadraticOut'
    }
  ])
}
const getDiskLine = async () => {
  set(
    diskLineOptionsData,
    'xAxis.data',
    diskData.value.map((v) => v.time)
  )
  set(diskLineOptionsData, 'series', [
    {
      name: '占用率',
      smooth: true,
      type: 'line',
      data: diskData.value.map((v) => v.usage),
      animationDuration: 2800,
      animationEasing: 'cubicInOut'
    }
  ])
}
const getAllApi = async () => {
  await Promise.all([getMemLine(), getCpuLine(), getDiskLine()])
  chartsShow.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
